<template>
  <GlobalBG title="故障上报" :showBack="true" :showCollege="false">
    <view class="page-container">
      <uni-forms
        ref="formRef"
        :modelValue="formData"
        @submit="onSubmit"
        label-width="100"
      >
        <view class="module">
          <uni-forms-item
            label="故障类型"
            name="faultType"
            class="select-popup"
            required
            :rules="[{ required: true, errorMessage: '请选择故障类型' }]"
          >
            <view class="fault-type-picker" @click="faultTypePopup.open()">
              <text v-if="formData.faultType" style="margin-left: auto">
                {{
                  faultTypeList.find(
                    (item) => item.value === formData.faultType
                  )?.text
                }}
              </text>
              <text v-else class="placeholder" style="margin-left: auto"
                >请选择</text
              >
              <uni-icons
                type="arrowright"
                size="24"
                color="#d7d7da"
              ></uni-icons>
            </view>
            <SelectPopup
              ref="faultTypePopup"
              :items="faultTypeList"
              :value="formData.faultType"
              @select="selectFaultType"
            />
          </uni-forms-item>

          <uni-forms-item
            label="故障描述"
            name="faultDesc"
            class="textarea-desc"
            required
            :rules="[{ required: true, errorMessage: '请输入故障描述' }]"
          >
            <textarea
              v-model="formData.faultDesc"
              placeholder="请输入"
              :maxlength="1000"
            />
          </uni-forms-item>
          <uni-forms-item label="" class="voice-input-forms-item">
            <VoiceInput
              :is-recording="isRecording"
              :temp-text="voiceTempText"
              @click="startVoiceInput"
            />
          </uni-forms-item>
        </view>

        <uni-forms-item label="添加图片" class="item-bg">
          <!-- 图片上传（使用默认限制） -->
          <ImageUpload @change="(files) => (formData.images = files)" />
        </uni-forms-item>

        <uni-forms-item label="添加视频" class="item-bg">
          <!-- 视频上传（使用默认限制） -->
          <VideoUpload @change="(files) => (formData.video = files)" />
        </uni-forms-item>
      </uni-forms>
      <button type="submit" class="submit-btn">提交</button>
    </view>
  </GlobalBG>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onNavigationBarButtonTap } from "@dcloudio/uni-app";
import ImageUpload from "@/components/ImageUpload/ImageUpload.vue";
import VideoUpload from "@/components/VideoUpload/VideoUpload.vue";

const formData = ref({
  faultType: "",
  faultDesc: "",
});
const imageList = ref<any[]>([]);
const videoList = ref<any[]>([]);

const rules = ref({
  faultType: { required: true, message: "请选择故障类型" },
  faultDesc: { required: true, message: "请输入故障描述" },
});

const faultTypePopup = ref();
const faultTypeList = ref([
  { value: "hardware", text: "硬件故障" },
  { value: "software", text: "软件故障" },
]);

const selectFaultType = (item: { value: string; text: string }) => {
  formData.value.faultType = item.value;
};

const goBack = () => {
  uni.navigateBack({
    delta: 1,
  });
};

// 语音输入
const isRecording = ref(false);
const voiceTempText = ref("");

// 在原来的代码中引入组件
import VoiceInput from "@/components/VoiceInput/VoiceInput.vue";

// 修改后的语音输入方法示例
const startVoiceInput = async () => {
  try {
    isRecording.value = true;
    // 调用语音识别API...
    // 识别过程中可以更新 voiceTempText.value
  } finally {
    isRecording.value = false;
  }
};

const onSubmit = async () => {
  const isValid = await (formData.value.formRef as any).validate();
  if (isValid) {
    console.log("提交数据：", formData.value, imageList.value, videoList.value);
    uni.showToast({ title: "提交成功", icon: "success" });
  }
};

onMounted(() => {
  // ✅ 正确调用方式
  onNavigationBarButtonTap((e) => {
    console.log("点击按钮索引:", e.index);
    if (e.index == 0) {
      uni.redirectTo({
        url: "/pages/index/index",
      });
    }
  });
});
</script>

<style scoped lang="scss">
.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f4f6fa;
  padding: 30rpx;
  box-sizing: border-box;
  .uni-forms {
    flex: 1;
    overflow: auto;
    .module {
      background: #ffffff;
      box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 12, 39, 0.06);
      border-radius: 20rpx;
      padding: 0 30rpx 30rpx;
      margin-bottom: 20rpx;
      .uni-forms-item {
        padding-left: 0;
        padding-right: 0;
      }
    }
    .uni-forms-item {
      margin-bottom: 20rpx;
      padding: 20rpx;
      &.item-bg {
        background: #ffffff;
        box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 12, 39, 0.06);
        border-radius: 20rpx;
        padding: 30rpx 30rpx 100rpx 30rpx;
        :deep(.uni-forms-item__content) {
          position: static;
        }
      }
      .tip {
        font-size: 24rpx;
        color: #999;
        display: block;
        margin-top: 10rpx;
      }
    }

    .fault-type-picker {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10rpx 0;
      color: #666;
      font-size: 28rpx;
    }
  }

  .submit-btn {
    margin-top: 40rpx;
    height: 90rpx;
    line-height: 90rpx !important;
    background-color: #5e93ff;
    font-weight: 500;
    font-size: 36rpx;
    color: #ffffff;
    border-radius: 44rpx;
    width: 100%;
  }
}
</style>
